<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="UTF-8">
    <title>济南市各区房源数据</title>
</head>
<body style="height: 100%; margin: 0">
    <div id="city_map" style="height: 100%"></div>





{#    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.1/echarts.min.js"></script>#}
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('city_map'));

        // 显示加载动画
        myChart.showLoading();

        // 济南市各区的房源数量和均价（硬编码数据）
        var jsonData = [
            ["区县", "房源数量", "均价 (元/平方米)"],
            ["历下区", 20000, 25000],
            ["市中区", 18000, 23000],
            ["槐荫区", 16000, 22000],
            ["天桥区", 14000, 21000],
            ["历城区", 19000, 20000],
            ["长清区", 8000, 18000],
            ["章丘区", 10000, 17000],
            ["济阳区", 7000, 16000],
            ["莱芜区", 6000, 15000],
            ["钢城区", 5000, 14000],
            ["平阴县", 4000, 13000],
            ["商河县", 3000, 12000]
        ];

        // 解析数据并转换为适用于ECharts的数据格式
        function parseJinanData(jsonData) {
            var data = [];
            for (var i = 1; i < jsonData.length; i++) {
                var row = jsonData[i];
                if (row && row.length >= 3) {
                    data.push({
                        name: row[0],   // 区县名称
                        value: row[1],  // 房源数量
                        avgPrice: row[2]  // 均价
                    });
                }
            }
            return data;
        }

        // 初始化地图
        function initJinanMap(data) {
            myChart.hideLoading();

            // 使用地图数据 URL
            fetch('https://geo.datav.aliyun.com/areas_v3/bound/370100_full.json') // 济南市地图
                .then(response => response.json())
                .then(geoJson => {
                    echarts.registerMap('jinan', geoJson);

                    // 设置地图配置
                    myChart.setOption({
                        title: {
                            text: '济南市各区房源数据',
                            left: 'center'
                        },
                        tooltip: {
                            trigger: 'item',
                            formatter: function (params) {
                                var avgPrice = params.data && params.data.avgPrice != null ? params.data.avgPrice : '未知';
                                var totalValue = params.data && params.data.value != null ? params.data.value : '未知';
                                return params.name + '<br/>' +
                                       '房源数量: ' + totalValue + '<br/>' +
                                       '均价: ' + avgPrice + '元/平方米';
                            },
                          textStyle: {
                                fontSize: 8 // 设置提示框字体大小为 12
                            }
                        },
                        visualMap: {
                            min: 0,
                            max: 25000,
                            left: 'left',
                            top: 'bottom',
                            text: ['高', '低'],
                            inRange: {
                                color: ['#e0f7fa', '#006064']
                            },
                            calculable: true
                        },
                        series: [
                            {
                                name: '房源数据',
                                type: 'map',
                                map: 'jinan',
                                label: {
                                    show: true,
                                    fontSize: 5
                                },
                                data: data
                            }
                        ]
                    });
                })
                .catch(error => {
                    console.error('Error fetching or processing the map data:', error);
                });
        }

        // 解析数据并初始化济南市地图
        var parsedData = parseJinanData(jsonData);
        initJinanMap(parsedData);
    </script>
</body>
</html>
